<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>css3动画</title>
		<style type="text/css">
			.dStyle1 {
				border: 1px solid;
				width: 60px;
				height: 60px;
				margin: 10px 20px;
				/*动画属性**/
				animation: divAction2 5s infinite;
				-webkit-animation: divAction2 5s infinite;
				/* Safari 和 Chrome */
			}
			/*定义动画动作*/
			
			@keyframes divAction {
				/*开始状态：等价于0%**/
				from {
					background-color: red;
				}
				/*结束状态：等价于100%**/
				to {
					background-color: blue;
					height: 100px;
					width: 100px;
				}
			}
			/*定义个动画动作**/
			
			@keyframes divAction2 {
				0% {
					background: red;
					position: relative;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					position: relative;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					position: relative;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					position: relative;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					position: relative;
					left: 0px;
					top: 0px;
				}
			}
			a{
				/*去掉下划线*/
				text-decoration: none;
			}
			/*a标签常用的伪类*/
			/*原始样式*/
			a:link{
				color: green;
			}
			/*鼠标浮上的样式*/
			a:hover{
				color: blue;
			}
			/*点中的样式（点中鼠标左键不放松时的样式）*/
			a:active{
				color: white;
			}
			/*点击之后的样式*/
			a:visited{
				color: yellow;
			}
			
		</style>
	</head>

	<body>
		<div class="dStyle1"></div>
		
		<br>
		<a href="index_css3.html" target="_blank">打开页面</a>
	</body>

</html>